<template>
  <div class="VehicleArchives">
    <div class="nav" ref="NavGreen">
      <mt-button size="small" @click.native.prevent="active = GreenBackground(0)">内场牌照</mt-button>
      <mt-button size="small" @click.native.prevent="active = GreenBackground(1)">限期通行证</mt-button>
      <mt-button size="small" @click.native.prevent="active = GreenBackground(2)">临时通行证</mt-button>
      <mt-button size="small" @click.native.prevent="active = GreenBackground(3)">B3层通行证</mt-button>
      <mt-button size="small" @click.native.prevent="active = GreenBackground(4)">B3层临时通行证</mt-button>
      <mt-button size="small" @click.native.prevent="active = GreenBackground(5)">非机动车通行证</mt-button>
    </div>
    <!-- cell组件 -->
    <v-table :TableList="tableData4" ref="TableList"></v-table>
    <div class="VehicleArchivesPagination">
      <button @click="PageRemove">上一页</button>
      <span>{{page}}/{{total}}</span>
      <button @click="PageAdd">下一页</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import VTable from "./VehicleArchivesTable";
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      total: "",
      tableData4: [],
      page: 1,
      DataForm: {
        limit: "5",
        type: "",
        page: 1
      },
      tabmt: [{}],
      active: "tab-container1",
      selected: ""
      //常用应用
    };
  },
  components: {
    VTable
  },
  created() {},
  computed: {
    ...mapState(["userInfo1"])
  },
  mounted() {
    this.GreenBackground(0);
    this.$store.commit("SET_USER_INFO", "车辆档案");
  },
  watch: {},
  methods: {
    GreenBackground(val) {
      let data = this.$refs.NavGreen.children;
      for (var i = 0; i < 6; i++) {
        this.$refs.NavGreen.children[i].classList.remove("Green1");
      }
      this.$refs.NavGreen.children[val].classList.add("Green1");
      this.DataForm.type = val + 1;
      this.page = 1;
      this.GetTable();
    },
    GetTable(val) {
      this.$refs.TableList.loading = true;
      this.$store.dispatch("GetTableDable", this.DataForm).then(data => {
        this.tableData4 = data.list;
        this.total = Math.round(data.total / 5);
        this.$refs.TableList.loading = false;
      });
    },
    // 上一页
    PageAdd() {
      if (this.page == this.total) {
        MessageBox({
          title: "提示",
          message: "不能再往后了"
        });
      } else {
        this.DataForm.page = this.page + 1;
        this.page = this.DataForm.page;
        this.GetTable();
      }
    },
    // 下一页
    PageRemove() {
      if (this.page == 1) {
        MessageBox({
          title: "提示",
          message: "不能再往前了"
        });
      } else {
        this.DataForm.page = this.page - 1;
        this.page = this.DataForm.page;
        this.GetTable();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scpoed>
.item {
  display: inline-block;
}

.nav {
  padding: 0.1rem;
}

.link {
  color: inherit;
  padding: 20px;
  display: block;
}
.nav button {
  width: 32%;
  font-size: 0.22rem;
  background: #fff;
  border: #409eff;
  color: #409eff;
  margin-top: 0.2rem;
  padding: 0;
  height: 1rem;
  line-height: 1rem;
}
.cell {
  text-align: center;
}
.Green1 {
  background: #409eff !important;
  color: #fff !important;
}
.VehicleArchivesPagination button {
  width: 32%;
  font-size: 0.22rem;
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
  margin-top: 0.2rem;
  padding: 0;
  height: 1rem;
  line-height: 1rem;
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
  outline: none;
}
</style>
